<template>
  <div class="wrap">
    <div class="dy">
      <h3>电影</h3>
      <div class="dy-img">
        <img src="../../../public/img/12.png" alt="" />
        <span>9.0</span>
      </div>
      <p class="title">长津湖</p>
      <p class="txt">中国影史票房冠军</p>
    </div>
    <ul class="list">
      <li v-for="(item, index) in list" :key="index">
        <div class="img">
          <img :src="item.img" />
        </div>
        <p class="title">{{ item.title }}</p>
        <p class="txt">{{ item.txt }}</p>
      </li>
    </ul>
    <div class="btn">
        <p class="p1">更多精彩电影</p>
        <p class="p2">换一换</p>
    </div>
    <div class="bottom">
        <p>Copyright©2019 优酷 youku.com 版权所有</p>
        <p>反盗版盗链声明</p>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "Box3",
  data(){
        return {
            list:[]
        }
    },
     created(){
        this.a1();
    },
    methods:{
        async a1(){
            let {data} = await axios.get('./1.json');
            this.list = data.c;
        }
    }
};
</script>
<style scoped>
.wrap {
  width: 100%;
}
.dy {
  width: 100%;
  margin-bottom: 0.2rem;
  margin-top: .3rem;
}
.dy > h3 {
  margin-left: 0.3rem;
  margin-bottom: 0.2rem;
}
.dy > .dy-img {
  width: 100%;
  position: relative;
}
.dy > .dy-img > img {
  width: 100%;
}
.dy > .dy-img > span {
  position: absolute;
  color: red;
  bottom: 0.2rem;
  right: 0.2rem;
  font-size: 0.4rem;
}
.dy > .title {
  margin-top: 0.2rem;
  margin-left: 0.3rem;
}
.dy > .txt {
  color: #999;
  font-size: 0.2rem;
  margin-left: 0.3rem;
  margin-top: 0.1rem;
}
.list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: .2rem;
        justify-content: space-around;
    }
    .list>li{
        width: 33%;
    }
    .list>li>.img{
        width: 100%;
    }
    .list>li>.img>img{
        width: 100%;
    }
    .list>li>.title,.list>li>.txt{
        padding-left: .2rem;
        padding-top: .1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .lsit>li>.title{
        font-size: .28rem;
    }
    .list>li>.txt{
        padding-bottom: .4rem;
        color: #999;
        font-size: .2rem;
    }
    .btn{
        width: 100%;
        margin-top: .2rem;
        display: flex;
        justify-content: space-around;
    }
    .btn>p{
        width: 3.2rem;
        height: 1rem;
        background: #F5F5F5;
        color: #999;
        line-height: 1rem;
        text-align: center;
    }
    .bottom{
        width: 100%;
        margin-top: .4rem;
    }
    .bottom>p{
        width:100%;
        text-align: center;
        margin-bottom: .2rem;
    }
    .bottom>p:last-child{
        color: #909090;
    }
</style>